<template>
	<view class="viewBg">
		<view class="lineH20"></view>
		<!-- 选择网格员 -->
		<view class="uni-list" v-if="showSelectUser">
			<view class="uni-list-cell">
				<view class="uni-list-cell-navigate uni-navigate-right" @click="showPicker">
					<text class="cell-text">选择网格员</text>
					<text class="cell-detail">{{selectedLabel}}</text>
				</view>
			</view>
		</view>


		<view class="selectDate" @click="onShowDatePicker">
			<image src="../../../static/img/calendar.png" mode="scaleToFill" style="width: 45upx;height: 45upx;"></image>
			<!-- <text class="dateText">{{selectedDate}}</text> -->
			<view class="uni-list-cell-db">
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">{{date}}</view>
				</picker>
			</view>
		</view>
		<view class="lineH1"></view>
		<button type="primary" @tap="checkUserPath">查看轨迹</button>
		<view class="lineH20"></view>
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" v-on:clickItem="onClickItem" :styleType="styleType"
			 :activeColor="activeColor"></uni-segmented-control>
		</view>
		<!-- <map style="width:100%;height: 70%;" :latitude="latitude" :longitude="longitude" :markers="covers"> -->
		<view class="uni-common-mt" v-if="current === 0">
			<!-- <view v-if="current === 0"> -->
			<map :latitude="location.latitude" :longitude="location.longitude" :markers="covers" :polyline="polyline" 
			 v-show="showMap">
			</map>
			<!-- </view> -->
		</view>
		<!-- 时间轴 -->
		<view class="uni-timeline" style="padding: 30upx 20upx;background-color: #fff;" v-if="current===1">
			<view class="uni-timeline-item uni-timeline-first-item" v-if="listFirst !== null">
				<view class="uni-timeline-item-divider"></view>
				<view class="uni-timeline-item-content">
					<view>
						位置: {{listFirst.latitude + ','+ listFirst.longitude}}
					</view>
					<view class="datetime">
						{{listFirst.createTime}}
					</view>
				</view>
			</view>
			<view class="uni-timeline-item" v-for="(item,index) in list" :key="index" v-if="item !== null">
				<view class="uni-timeline-item-divider"></view>
				<view class="uni-timeline-item-content">
					<view>位置:{{item.latitude + ',' + item.longitude}}</view>
					<view class="datetime">{{item.createTime}}</view>
				</view>
			</view>
			<view class="uni-timeline-item uni-timeline-last-item" v-if="listLast !== null">
				<view class="uni-timeline-item-divider"></view>
				<view class="uni-timeline-item-content">
					<view>位置: {{listLast.latitude + ',' + listLast.longitude}}</view>
					<view class="datetime">{{listLast.createTime}}</view>
				</view>
			</view>
		</view>
		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		 @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
		<!-- <mx-datepicker  v-model="showPicker" :init="initDate" type="date" @selected="onSelected" /> -->
	</view>

</template>

<script>
	import mpvuePicker from "@/components/mpvue-picker/mpvuePicker.vue"
	import uniIcon from "@/components/uni-icon/uni-icon.vue"
	import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue"

	var util = require('../../../common/util.js');
	var formatLocation = util.formatLocation;

	export default {
		components: {
			uniIcon,
			mpvuePicker,
			uniSegmentedControl
		},
		data() {
			const currentDate = this.getDate({
				format: true
			});

			return {
				showSelectUser: false,
				showMap: true,
				themeColor: '#007AFF',
				pickerValueDefault: [0],
				mode: '',
				pickerValueArray: [],
				selectedLabel: "请选择",
				selectedValue: 0,


				location: {},
				covers: [{
					latitude: 39,
					longitude: 116,
					iconPath: '../../../static/img/location'
				}],
				polyline: [{
					points: [],
					color: "#0000AA",
					width: 3,
					dottedLine: false,
					arrowLine: true,
				}],
				circles: [{
					latitude: 43.81,
					longitude: 125.38,
					color: "#F7F7F7",
					fillColor: "#0000AA",
					radius: 51,
				}],
				items: [
					'地图',
					'列表'
				],
				current: 0,
				activeColor: '#007aff',
				styleType: 'button',

				date: currentDate,

				//列表
				listFirst: null,
				list: null,
				listLast: null,

			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},

		onLoad() {
			var userInfo = getApp().globalData.userInfo;
			if (userInfo.role === 'WGZ') {
				this.showSelectUser = true;
			} else {
				this.showSelectUser = false;
			}
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					console.log(res.longitude, res.latitude);
					this.location = {
						longitude: res.longitude,
						latitude: res.latitude
					};
					// this.location = formatLocation(res.longitude, res.latitude)
					console.log("经度" + this.location.latitude + "维度" + this.location.longitude);
				}
			})
		},
		methods: {
			showPicker() {
				this.showMap = false;
				if (this.pickerValueArray.length == 0) {
					this.$http.get('ac/xagrid/appGridUserService/getGridUsers', { //选择网格员
						pageNo: 1,
						pageSize: 10000
					}).then((res) => {
						var tempList = new Array();
						for (var i = 0; i < res.data.results.length; i++) {
							tempList.push({
								label: res.data.results[i].name,
								value: res.data.results[i].userId
							});
						}


						this.pickerValueArray = tempList;
						this.$refs.mpvuePicker.show();
					});
				} else {
					this.$refs.mpvuePicker.show();
				}
				this.mode = 'selector';
				this.deepLength = 1;
				this.pickerValueDefault = [0];

			},

			onConfirm(e) {
				this.showMap = true;
				this.selectedLabel = e.label;
				this.selectedValue = e.value;

			},
			onClickItem(index) { //地图，列表
				if (this.current !== index) {
					this.current = index;
				}
			},
			checkUserPath() {
				var that = this;
				


				if (this.showSelectUser && this.selectedValue === 0) {
					uni.showToast({
						title: '请选择网格员'
					})
					return;
				}
				var params = {createTime:this.date};
				if(this.selectedValue !== 0){
					params.userId = String(this.selectedValue);
				}
				this.$http.post('ac/xagrid/appUserLocationService/trajectoryList', params).then((res) => {
					var tempCovers = new Array();
					var tempPoint = new Array();
					for (var i = 0; i < res.data.length; i++) {
						tempCovers.push({
							latitude: res.data[i].latitude,
							longitude: res.data[i].longitude,
							iconPath: '../../../static/img/location'
						});
						tempPoint.push({
							latitude: res.data[i].latitude,
							longitude: res.data[i].longitude
						});
					}
					if(tempPoint.length >0){
						that.location = tempPoint[0];
					}
					that.covers = tempCovers;
					that.polyline = [{
						points: tempPoint,
						color: "#0000AA",
						width: 3,
						dottedLine: false,
						arrowLine: true,
						arrowIconPath:'../../../static/img/maparrow'
					}];
					//列表
					if(res.data.length !== 0){
						this.list = res.data;
						this.listFirst = this.list.shift();
						this.listLast = this.list.pop();
						console.log('有值');
						
					}else{
						this.list = null;
						this.listFirst = null;
						this.listLast = null;
						console.log('无值');
					}
					
				})
			},
			bindDateChange: function(e) {
				this.date = e.target.value

			},

			getDate(type) {
				const date = new Date();

				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style>
	.viewBg {
		width: 100%;
		height: 100%;
		/* background-color: #0FAEFF; */
	}

	.cell-detail {
		margin-right: 20upx;
	}

	.uni-list-cell-navigate {
		justify-content: space-between;
	}

	.selectDate {
		padding: 20upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.lineH20 {
		height: 20upx;
		width: 100%;
		background-color: #F7F7F7;
	}

	.lineH1 {

		height: 2upx;
		width: 100%;
		/* margin-left: 10upx; */
		background-color: #F7F7F7;
	}

	button {
		/* margin-top: 30upx; */
		/* margin-bottom: 30upx; */
		margin: 30upx;
	}

	map {
		width: 100%;
		height: 700upx;
	}
</style>
